<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 标题 -->
    <title>首页</title>
    <!-- 关键词 -->
    <meta name="keywords" content="" />
    <!-- 网站简介 -->
    <meta name="description" content="" />
    <!-- 自适应屏幕 -->
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- 轮播图 CSS 文件 -->
    <link rel="stylesheet" href="css/banner.css" type="text/css">
    <!-- mui 文件 -->
    <link rel="stylesheet" href="css/mui.min.css" type="text/css">
    <!-- 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <header class="mui-bar mui-bar-nav home-nav tongdui-wrapper">
        <!-- 顶部 -->
        <div class="top-nav clearfix ">
            <div class="top-nav-left">
                <a href="" class="iconfont">&#xe76a;</a>
            </div>
            <div class="top-nav-center">
                <a href="product.html"><input type="text" placeholder="小米 5s"></a> 
            </div>
            <div class="top-nav-right">
                <a href="" class="iconfont">&#xe605;</a>
            </div>
        </div>
    </header>

 

    <!--下拉刷新容器-->
    <div id="wrapper" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <!-- 轮播图 -->
            <div class="banner index-banner">
                <div id="owl-banner" class="owl-carousel">
                    <div><a href="detail.html"><img src="images/banner11.jpg" alt=""></a></div>
                    <div><a href="detail.html"><img src="images/banner12.jpg" alt=""></a></div>
                    <div><a href="detail.html"><img src="images/banner13.jpg" alt=""></a></div>
                </div>
            </div>

            <!-- 首页小分类 -->
            <div class="index-nav clearfix">
                <a href="" class="index-nav1">
                    <div class="iconfont">&#xe604;</div>
                    分类查询
                </a>
                <a href="" class="index-nav2">
                    <div class="iconfont">&#xe66a;</div>
                    订单查询
                </a>
                <a href="cart.html" class="index-nav3">
                    <div class="iconfont">&#xe601;</div>
                    购物车
                </a>
                <a href="shop.html" class="index-nav4">
                    <div class="iconfont">&#xe631;</div>
                    附近店铺  
                </a>
                <a href="" class="index-nav5">
                    <div class="iconfont">&#xe741;</div>
                    联系客服
                </a>
                <a href="product.html" class="index-nav6">
                    <div class="iconfont">&#xe600;</div>
                    购物券商品
                </a>
                <a href="product.html" class="index-nav7">
                    <div class="iconfont">&#xe649;</div>
                    一券通商品
                </a>
                <a href="" class="index-nav8">
                    <div class="iconfont">&#xe626;</div>
                    我的二维码   
                </a>
                <a href="" class="index-nav9">
                    <div class="iconfont">&#xe602;</div>
                    爱心基金
                </a>
                <a href="" class="index-nav10">
                    <div class="iconfont">&#xe735;</div>
                    关于我们   
                </a>
            </div>

            <!-- 滚动消息 -->
            <div class="scrool-tip" id="scrool-tip">
                <div><a href="detail.html">Huawei nova 青春版</a></div>
                <div><a href="detail.html">Huawei nova 青春版</a></div>
                <div><a href="detail.html">Huawei nova 青春版</a></div>
                <div><a href="detail.html">Huawei nova 青春版</a></div>
            </div>

            <!-- 限时抢购 -->
            <div class="time-limit">
                <h4 class="clearfix container">
                    <div class="left">
                        <span>限时</span>抢购<span class="iconfont">&#xe607;</span>
                        <b id="limit-time">
                            <span class="hour"></span>:
                            <span class="minute"></span>:
                            <span class="second"></span>
                        </b>
                    </div>
                    <div class="right">
                        <a href=""><span class="iconfont">&#xe606;</span></a>
                    </div>
                </h4>
                <ul class="limit-goods clearfix">
                    <li>
                        <div class="limit-goods-pic">
                            <a href="detail.html"><img src="images/goods1.png" alt=""></a>
                        </div>
                        <div class="limit-goods-name">
                            <a href="detail.html">超值特惠电饭煲</a>
                        </div>
                        <span class="mask">
                            89元
                        </span>  
                    </li>
                    <li>
                        <div class="limit-goods-pic">
                            <a href="detail.html"><img src="images/goods2.png" alt=""></a>
                        </div>
                        <div class="limit-goods-name">
                            <a href="detail.html">超值特惠电饭煲</a>
                        </div>
                        <span class="mask">
                            128元
                        </span>  
                    </li>
                    <li>
                        <div class="limit-goods-pic">
                            <a href="detail.html"><img src="images/goods3.png" alt=""></a>
                        </div>
                        <div class="limit-goods-name">
                            <a href="">超值特惠电饭煲</a>
                        </div>
                        <span class="mask">
                            49元
                        </span>  
                    </li>
                    <li>
                        <div class="limit-goods-pic">
                            <a href="detail.html"><img src="images/goods1.png" alt=""></a>
                        </div>
                        <div class="limit-goods-name">
                            <a href="">超值特惠电饭煲</a>
                        </div>
                        <span class="mask">
                            89元
                        </span>  
                    </li>
                    <li>
                        <div class="limit-goods-pic">
                            <a href="detail.html"><img src="images/goods2.png" alt=""></a>
                        </div>
                        <div class="limit-goods-name">
                            <a href="detail.html">超值特惠电饭煲</a>
                        </div>
                        <span class="mask">
                            128元
                        </span>  
                    </li>
                    <li>
                        <div class="limit-goods-pic">
                            <a href="detail.html"><img src="images/goods3.png" alt=""></a>
                        </div>
                        <div class="limit-goods-name">
                            <a href="detail.html">超值特惠电饭煲</a>
                        </div>
                        <span class="mask">
                            49元
                        </span>  
                    </li>
                </ul>
            </div>
            

            <!-- 广告位 -->
            <div class="advertising-first">
                <a href="detail.html"><img src="images/adf1.png" alt=""></a>
            </div>

            <!-- 热门品牌 -->
            <div class="brand-selling">
                <h4 class="clearfix container">
                    <div class="left">
                        <span>品牌</span>特卖<b>知名品牌，特价销售</b>
                    </div>
                    <div class="right">
                        <a href="">更多<span class="iconfont">&#xe606;</span></a>
                    </div>
                </h4>
                <div class="brand-sell clearfix">
                    <!-- 左边 -->
                    <ul class="brand-selling-goods clearfix">
                        <li class="">
                            <a href="">
                                <img src="images/b3.png" alt="">
                            </a>
                        </li>
                    </ul>

                    <!-- 右边 -->
                    <ul class="clearfix brand-selling-goods1">
                        <li class="">
                            <a href="">
                                <img src="images/b1.png" alt="">
                            </a>
                        </li>
                        <li class="">
                            <a href="">
                                <img src="images/b2.png" alt="">
                            </a>
                        </li>
                        <li class="">
                            <a href="">
                                <img src="images/b4.png" alt="">
                            </a>
                        </li>
                        <li class="">
                            <a href="">
                                <img src="images/b5.png" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="brand-sell clearfix">
                    <!-- 左边 -->
                    <ul class="brand-selling-goods clearfix">
                        <li class="">
                            <a href="">
                                <img src="images/b3.png" alt="">
                            </a>
                        </li>
                    </ul>

                    <!-- 右边 -->
                    <ul class="clearfix brand-selling-goods1">
                        <li class="">
                            <a href="">
                                <img src="images/b1.png" alt="">
                            </a>
                        </li>
                        <li class="">
                            <a href="">
                                <img src="images/b2.png" alt="">
                            </a>
                        </li>
                        <li class="">
                            <a href="">
                                <img src="images/b4.png" alt="">
                            </a>
                        </li>
                        <li class="">
                            <a href="">
                                <img src="images/b5.png" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

               <!-- 热门推荐 -->
            <div class="guess-like" style="padding-bottom:0">
                <h4 class="clearfix container">
                    <div class="left">
                        <span class="iconfont">&#xe602;</span>热门推荐
                    </div>
                    <div class="right">
                        <a href="product.html"><span class="iconfont">&#xe606;</span></a>
                    </div>
                </h4>
                <ul class="guess-like-goods clearfix">
                    <li class="goods-listt">
                        <a href="detail.html">
                           <div class="guess-like-pic">
                                <img src="images/goods6.png" alt="">
                           </div>
                           <div class="guess-like-name">
                                三利 毛巾家纺纯棉吸水
                           </div>
                           <div class="guess-like-price">
                               29.9一券通  <s>￥59</s>       
                           </div>
                           <div class="guess-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                           </div> 
                           <div class="guess-like-sale">
                                销量：492
                           </div>
                        </a>
                    </li>
                    <li class="goods-listt">
                        <a href="detail.html">
                           <div class="guess-like-pic">
                                <img src="images/goods6.png" alt="">
                           </div>
                           <div class="guess-like-name">
                                三利 毛巾家纺纯棉吸水
                           </div>
                           <div class="guess-like-price">
                               29.9一券通  <s>￥59</s>       
                           </div>
                           <div class="guess-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                           </div> 
                           <div class="guess-like-sale">
                                销量：492
                           </div>
                        </a>
                    </li>
                    <li class="goods-listt">
                        <a href="detail.html">
                           <div class="guess-like-pic">
                                <img src="images/goods6.png" alt="">
                           </div>
                           <div class="guess-like-name">
                                三利 毛巾家纺纯棉吸水
                           </div>
                           <div class="guess-like-price">
                               29.9一券通  <s>￥59</s>       
                           </div>
                           <div class="guess-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                           </div> 
                           <div class="guess-like-sale">
                                销量：492
                           </div>
                        </a>
                    </li>
                    <li class="goods-listt">
                        <a href="detail.html">
                           <div class="guess-like-pic">
                                <img src="images/goods6.png" alt="">
                           </div>
                           <div class="guess-like-name">
                                三利 毛巾家纺纯棉吸水
                           </div>
                           <div class="guess-like-price">
                               29.9一券通  <s>￥59</s>       
                           </div>
                           <div class="guess-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                           </div> 
                           <div class="guess-like-sale">
                                销量：492
                           </div>
                        </a>
                    </li>
                    <li class="goods-listt">
                        <a href="detail.html">
                           <div class="guess-like-pic">
                                <img src="images/goods6.png" alt="">
                           </div>
                           <div class="guess-like-name">
                                三利 毛巾家纺纯棉吸水
                           </div>
                           <div class="guess-like-price">
                               29.9一券通  <s>￥59</s>       
                           </div>
                           <div class="guess-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                           </div> 
                           <div class="guess-like-sale">
                                销量：492
                           </div>
                        </a>
                    </li>
                    <li class="goods-listt">
                        <a href="detail.html">
                           <div class="guess-like-pic">
                                <img src="images/goods6.png" alt="">
                           </div>
                           <div class="guess-like-name">
                                三利 毛巾家纺纯棉吸水
                           </div>
                           <div class="guess-like-price">
                               29.9一券通  <s>￥59</s>       
                           </div>
                           <div class="guess-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                           </div> 
                           <div class="guess-like-sale">
                                销量：492
                           </div>
                        </a>
                    </li>

                    <li class="goods-listt">
                        <a href="detail.html">
                           <div class="guess-like-pic">
                                <img src="images/goods6.png" alt="">
                           </div>
                           <div class="guess-like-name">
                                三利 毛巾家纺纯棉吸水
                           </div>
                           <div class="guess-like-price">
                               29.9一券通  <s>￥59</s>       
                           </div>
                           <div class="guess-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                           </div> 
                           <div class="guess-like-sale">
                                销量：492
                           </div>
                        </a>
                    </li>
                    <li class="goods-listt">
                        <a href="detail.html">
                           <div class="guess-like-pic">
                                <img src="images/goods6.png" alt="">
                           </div>
                           <div class="guess-like-name">
                                三利 毛巾家纺纯棉吸水
                           </div>
                           <div class="guess-like-price">
                               29.9一券通  <s>￥59</s>       
                           </div>
                           <div class="guess-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                           </div> 
                           <div class="guess-like-sale">
                                销量：492
                           </div>
                        </a>
                    </li>
                    <li class="goods-listt">
                        <a href="detail.html">
                           <div class="guess-like-pic">
                                <img src="images/goods6.png" alt="">
                           </div>
                           <div class="guess-like-name">
                                三利 毛巾家纺纯棉吸水
                           </div>
                           <div class="guess-like-price">
                               29.9一券通  <s>￥59</s>       
                           </div>
                           <div class="guess-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                           </div> 
                           <div class="guess-like-sale">
                                销量：492
                           </div>
                        </a>
                    </li>
                    <li class="goods-listt">
                        <a href="detail.html">
                           <div class="guess-like-pic">
                                <img src="images/goods6.png" alt="">
                           </div>
                           <div class="guess-like-name">
                                三利 毛巾家纺纯棉吸水
                           </div>
                           <div class="guess-like-price">
                               29.9一券通  <s>￥59</s>       
                           </div>
                           <div class="guess-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                           </div> 
                           <div class="guess-like-sale">
                                销量：492
                           </div>
                        </a>
                    </li>

                    <li class="goods-listt">
                        <a href="detail.html">
                           <div class="guess-like-pic">
                                <img src="images/goods6.png" alt="">
                           </div>
                           <div class="guess-like-name">
                                三利 毛巾家纺纯棉吸水
                           </div>
                           <div class="guess-like-price">
                               29.9一券通  <s>￥59</s>       
                           </div>
                           <div class="guess-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                           </div> 
                           <div class="guess-like-sale">
                                销量：492
                           </div>
                        </a>
                    </li>
                    <li class="goods-listt">
                        <a href="detail.html">
                           <div class="guess-like-pic">
                                <img src="images/goods6.png" alt="">
                           </div>
                           <div class="guess-like-name">
                                三利 毛巾家纺纯棉吸水
                           </div>
                           <div class="guess-like-price">
                               29.9一券通  <s>￥59</s>       
                           </div>
                           <div class="guess-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                           </div> 
                           <div class="guess-like-sale">
                                销量：492
                           </div>
                        </a>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <!-- 底部导航 -->
    <div class="foot-nav clearfix">
        <a href="index.html" class="active">
            <div class="iconfont">&#xe729;</div>
            首页
        </a>
        <a href="sort.html" class="">
            <div class="iconfont">&#xe604;</div>
            分类
        </a>
        <a href="shop.html" class="">
            <div class="iconfont">&#xe603;</div>
            附近
        </a>
        <a href="cart.html" class="">
            <div class="iconfont">&#xe601;</div>
            购物车
        </a>
        <a href="usercenter.html" class="">
            <div class="iconfont">&#xe614;</div>
            我的    
        </a>
    </div>

    <!-- 返回顶部 -->
    <div class="actGotop iconfont">
        &#xe63c;
    </div>

    <!-- jQuery文件 -->
    <script src="js/jquery.min.js"></script>
    <!-- banner文件 -->
    <script src="js/banner.js"></script>
    <!-- 延迟加载 -->
    <script src="js/lazyload.js"></script>
    <script src="js/mui.js"></script>
    <script type="text/javascript">
        $(function () {
            $("img").delayLoading({
                defaultImg: "images/loading.gif",    // 预加载前显示的图片
                errorImg: "images/loading1.gif",                        // 读取图片错误时替换图片(默认：与defaultImg一样)
                imgSrcAttr: "src",                  // 读取图片的src
                setImg: "originalSrc",              //记录图片路径的属性(默认：originalSrc，把页面img的src属性值传给originalSrc属性)
                beforehand: 0,                       // 预先提前多少像素加载图片(默认：0)
                event: "scroll",                     // 触发加载图片事件(默认：scroll)
                duration: "fast",                  // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000),默认:"normal"
                container: window,                   // 对象加载的位置容器(默认：window)
                success: function (imgObj) { },      // 加载图片成功后的回调函数(默认：不执行任何操作)
                error: function (imgObj) { }         // 加载图片失败后的回调函数(默认：不执行任何操作)
            });
        });
    </script>

    <!-- 轮播图 -->
    <script>
        jQuery(function($) {
            $("#owl-banner").owlCarousel({
                singleItem: true,
                paginationNumbers: false,
                autoPlay: 6000,
                navigation: true,
                navigationText: ["",""],
            });
        });
    </script>

    <!-- 喇叭提示 -->
    <script language="javascript" type="text/javascript"> 
        var oMarquee = document.getElementById("scrool-tip");  //滚动对象
        var iLineHeight = 40;  //单行高度，像素
        var iLineCount = 2;  //实际行数
        var iScrollAmount = 1;  //每次滚动高度，像素
        function run() {
        oMarquee.scrollTop += iScrollAmount;
        if ( oMarquee.scrollTop == iLineCount * iLineHeight )
        oMarquee.scrollTop = 0;
        if ( oMarquee.scrollTop % iLineHeight == 0 ) {
        window.setTimeout( "run()", 2000 );
        } else {
        window.setTimeout( "run()", 20 );
        }
        }
        oMarquee.innerHTML += oMarquee.innerHTML;
        window.setTimeout( "run()", 2000 );
    </script> 
   
    <!-- 倒计时 -->
    <script type="text/javascript">
        $(function(){
            countDown("2017/5/25 10:13:59",null,"#limit-time .hour","#limit-time .minute","#limit-time .second");
        });
        function countDown(time,day_elem,hour_elem,minute_elem,second_elem){
            //if(typeof end_time == "string")
            var end_time = new Date(time).getTime(),//月份是实际月份-1
            //current_time = new Date().getTime(),
            sys_second = (end_time-new Date().getTime())/1000;
            var timer = setInterval(function(){
                if (sys_second > 0) {
                    sys_second -= 1;
                    var day = Math.floor((sys_second / 3600) / 24);
                    var hour = Math.floor((sys_second / 3600) % 24);
                    var minute = Math.floor((sys_second / 60) % 60);
                    var second = Math.floor(sys_second % 60);
                    day_elem && $(day_elem).text(day);//计算天
                    $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
                    $(minute_elem).text(minute<10?"0"+minute:minute);//计算分
                    $(second_elem).text(second<10?"0"+second:second);// 计算秒
                } else { 
                    clearInterval(timer);
                }
            }, 1000);
        }
    </script>
   
    <!-- 返回顶部 -->
    <script>
        $(function(){ 
          $(window).scroll(function() {   
            if($(window).scrollTop() >= 50){
              $('.actGotop').fadeIn(300); 
            }else{    
              $('.actGotop').fadeOut(300);    
            }  
          });
          $('.actGotop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 
        });
    </script>
        
    <script>
        $(function(){
            mui('body').on('tap','a',function(){document.location.href=this.href;}); //解决a标签无法跳转
            var counter = 0;
            var num = 10;
            var pageStart = 0,pageEnd = 0;
            mui.init({
                pullRefresh: {
                    container: '#wrapper',

                    down: {
                        contentrefresh: '正在刷新...',
                        callback: pulldownRefresh
                    },
                    up: {
                        contentrefresh: '正在加载...',
                        callback: pullupRefresh
                    }
                }

            });
            /**
             * 下拉刷新具体业务实现
             */
            function pulldownRefresh() {
                setTimeout(function() {
                    var i ;
                    $.ajax({ 
                        type:"get", 
                        url:"json/product.json", 
                        dataType:"json",
                        async: true,　 
                        success:function(data){
                            var result = '';
                            var table = document.body.querySelector('.guess-like-goods');
                            var cells = document.body.querySelectorAll('.goods-listt');
                            for(var i = 0; i < 10; i++) {
                                var li = document.createElement('li');
                                li.className = 'goods-listt';
                                li.innerHTML +=  '<a class=" clearfix" href="'+data.lists[i].link+'">'
                                     +'<div class="guess-like-pic"><img src="'+data.lists[i].pic+'" alt=""> </div>'  // 图片
                            
                                    +'<div class="guess-like-name">'+data.lists[i].title+'</div>' //标题
                                    +'<div class="guess-like-price">'+data.lists[i].price+' <s>'+data.lists[i].discount+'</s> </div>' //折扣
                                    +'<div class="guess-like-send clearfix"><div class="left">赠送'+data.lists[i].comment+'购物券</div><div class="right">捐'+data.lists[i].sale+'一券通</div></div>' //赠送
                                  
                                    +'<div class="guess-like-sale">销量：'+data.lists[i].sale+'</div>' //销量
                                +'</a>';
                                //下拉刷新，新纪录插到最前面；
                                table.insertBefore(li, table.firstChild);
                            }
                           
                            mui('#wrapper').pullRefresh().endPulldownToRefresh(); 
                        }
                    });      
           
                }, 1500);
            }
            // var count = 0;
            /**
             * 上拉加载具体业务实现
             */
            function pullupRefresh() {
                setTimeout(function() {
                    mui('#wrapper').pullRefresh().endPullupToRefresh(); 
                    var i ;
                    $.ajax({ 
                        type:"get", 
                        url:"json/product.json", 
                        dataType:"json",
                        async: true,　 
                        success:function(data){
                            counter++;
                            pageEnd = num * counter;
                            pageStart = pageEnd - num;
                            var result = '';
                            for(var i = pageStart; i < pageEnd; i++) {
                                result +="<li class='goods-listt'>";
                                result +=  '<a class=" clearfix" href="'+data.lists[i].link+'">'
                                     +'<div class="guess-like-pic"><img src="'+data.lists[i].pic+'" alt=""> </div>'  // 图片
                            
                                    +'<div class="guess-like-name">'+data.lists[i].title+'</div>' //标题
                                    +'<div class="guess-like-price">'+data.lists[i].price+' <s>'+data.lists[i].discount+'</s> </div>' //折扣
                                    +'<div class="guess-like-send clearfix"><div class="left">赠送'+data.lists[i].comment+'购物券</div><div class="right">捐'+data.lists[i].sale+'一券通</div></div>' //赠送
                                  
                                    +'<div class="guess-like-sale">销量：'+data.lists[i].sale+'</div>' //销量
                                +'</a>';
                                result +="</li>";
                            }
                            $('#wrapper .guess-like-goods').append(result);  
                        }
                    });     
                }, 1500);
            }
        });
    </script>
</body>
</html>